import {install} from "vuex";
//首先导入ToastVue，用来导入原组件
import Toast from "./Toast";
import Vue from "vue";

const obj = {}

obj.install = function (Vue){

  //1、Vue.extend()创建组件构造器，把ToastVue的东西都放进去
  //===相当于平常的 创建一个新的子组件，以供后面其他父组件调用
  const toastConstructor = Vue.extend(Toast)

  //2、新建一个叫toast的组件对象，使用构造器new一个出来
  //===相当于平常的import toast form 'ss/dd/ff'
  const toast = new toastConstructor()

  //3、将组件对象，手动挂载到某一个元素上(不太懂)
  //这里是创建了一个div，然后挂载了上去
  //===相当于平常的在components里面挂载组件
  toast.$mount(document.createElement('div'))

  //4、toast.$el 对应的是div，把元素都添加进页面内
  // 给DOM添加一个子节点，就是这个div，也就是之前ToastVue的内容,这里是不是div好像没影响
  //===相当于平常的 在html里面调用组件标签：<toast />这种
  document.body.appendChild(toast.$el)

  //这里把Vue原型里面加一个$toast赋值为对象，然后就都可以用$toast了
  //这里$toast时自定义的名字，里面的内容也就是赋值来源toast里面的内容,
  //打印$toast可以看到里面有message，isShow，show（）
  //直接赋值为Toast没法调用里面的内容
  Vue.prototype.$toast = toast

}


export default obj
